<template>
	<basic-container>
		<el-col :span="20">
			<el-amap :zoom="12" :style="{height:screenHeight}" ref="map">
				<el-amap-marker v-for="(mark,i) in markpoint" :position="mark.position" :key="i" :vid="i" :label="mark.label">
				</el-amap-marker>
			</el-amap>
		</el-col>
		<el-col :span="4">
			<avue-data-panel :option="option"></avue-data-panel>
		</el-col>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';
	import VueAMap from 'vue-amap';
	VueAMap.initAMapApiLoader({
		key: '7ab53b28352e55dc5754699add0ad862',
		v: '1.4.15'
	});

	export default {
		data() {
			return {
				markpoint: [],
				screenHeight: (document.documentElement.clientHeight - 100) + 'px',
				option: {
					span: 24,
					data: [{
							click: () => {
								this.$router.push({
									path: '/waste/order'
								});
							},
							title: '订单数',
							count: '0',
							icon: 'el-icon-s-order',
							color: '#00a7d0',
						},
						{
							click: () => {
								this.$router.push({
									path: '/waste/barcode'
								});
							},
							title: '待入库',
							count: '0',
							icon: 'el-icon-truck',
							color: 'rgb(29, 143, 124)',
						},
						{
							click: () => {
								this.$router.push({
									path: '/wms/inventory'
								});
							},
							title: '库存数',
							count: '0',
							icon: 'el-icon-success',
							color: 'rgb(85, 92, 230)',
						},
						{
							click: () => {
								this.$router.push({
									path: '/waste/organize'
								});
							},
							title: '客户数',
							count: '0',
							icon: 'el-icon-user-solid',
							color: 'rgb(27, 201, 142)',
						}
					]
				}
			};
		},
		computed: {},
		created() {
			request({
				url: '2/api/BaseOrganization/markpoint'
			}).then(res => {
				this.markpoint = res.data.data;
				this.option.data[3].count = this.markpoint.length;
			});
			request({
				url: '2/api/OrderIn/pages',
				params: {
					status: 0,
					limit: 1
				}
			}).then(res => {
				this.option.data[0].count = res.data.remark;
			});
			request({
				url: '2/api/OrderInDetail/pages',
				params: {
					status: 0,
					limit: 1
				}
			}).then(res => {
				this.option.data[1].count = res.data.remark;
			});
			request({
				url: '2/api/WmsInventory/getpages',
				params: {
					limit: 1
				}
			}).then(res => {
				this.option.data[2].count = res.data.remark;
			});
			// request({
			// 	url: '2/api/WmsOrganization/getpages',
			// 	params: {
			// 		limit: 1
			// 	}
			// }).then(res => {
			// 	this.option.data[3].count = res.data.remark;
			// });
		},
		mounted() {
			this.mapInit();
		},
		methods: {
			mapInit() {
				var that = this;
				AMap.plugin('AMap.DistrictSearch', function() {
					// 创建行政区查询对象
					var district = new AMap.DistrictSearch({
						// 返回行政区边界坐标等具体信息
						extensions: 'all',
						// 设置查询行政区级别为 区 
						level: 'district'
					})

					district.search('320000', function(status, result) {
						var bounds = result.districtList[0].boundaries
						var polygons = []
						if (bounds) {
							for (var i = 0, l = bounds.length; i < l; i++) {
								//生成行政区划polygon
								var polygon = new AMap.Polygon({
									map: that.$refs.map.$amap,
									strokeWeight: 1,
									path: bounds[i],
									fillOpacity: 0.3,
									fillColor: '#CCF3FF',
									strokeColor: '#CC66CC'
								})
								polygons.push(polygon)
							}
							// 地图自适应
							that.$refs.map.$amap.setFitView(polygons)
						}
					})
				})
			}
		}
	};
</script>

<style lang="scss">
	.avue-data-panel .item {
		margin: 0px 0px 0px 20px;
	}
</style>
